<template>
	<view class="normal-login-container">
		<view class="logo-content align-center">
			<view>
				<image style="width: 160rpx;height: 160rpx;" src="@/static/logo/logo.png" mode="aspectFit"></image>
			</view>
			<view class="title">
				专家问诊
			</view>
		</view>
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<image src='@/static/images/icon/phone.png' class="login_icon" mode="aspectFit"></image>
				<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<image src='@/static/images/icon/pass.png' class="login_icon" mode="aspectFit"></image>
				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			<view class="captcha-box flex align-center" v-if="captchaEnabled">
				<view class="input-item flex align-center">
					<image src='@/static/images/icon/code.png' class="login_icon" mode="aspectFit"></image>
					<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
				</view>
				<image :src="codeUrl" @click="getCode" class="captcha-img"></image>
			</view>
			<view class="action-btn">
				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg">登录</button>
			</view>
			<view class="reg text-center" v-if="register">
				<text @click="handleUserForgot" class="text-grey">忘记密码</text>
				<text @click="handleUserRegister" class="text-blue">注册账号</text>
			</view>
			<view class="agreement-box">
				<view @click="checkboxChange">
					<view class="agreement-box-main">
						<view>
							<image v-if="this.loginForm.isAgrement" src='@/static/images/icon/check.png'
								class="agreement-box-icon" mode="aspectFit">
							</image>
							<image v-else src='@/static/images/icon/no_check.png' class="agreement-box-icon"
								mode="aspectFit">
							</image>
						</view>
						<view>
							<text class="agreement-text">
								<text class="text-grey">登录即代表同意</text>
								<text @click.stop="handleUserAgrement" class="text-blue">《用户协议》</text>
								<text @click.stop="handlePrivacy" class="text-blue">《隐私协议》</text>
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeUrl: "",
				captchaEnabled: true,
				// 用户注册开关
				register: false,
				globalConfig: getApp().globalData.config,
				loginForm: {
					isAgrement: false,
					username: "17621546163",
					password: "123456",
					code: "",
					uuid: ''
				},
			}
		},
		methods: {
			// 用户忘记密码
			handleUserForgot() {},
			// 用户注册
			handleUserRegister() {},
			// 隐私协议
			handlePrivacy() {},
			// 用户协议
			handleUserAgrement() {},
			// 获取图形验证码
			getCode() {
				this.$http({
					url: '/auth/code',
					data: {},
					method: 'get'
				}).then(res => {
					this.captchaEnabled = res.captchaEnabled === undefined ? true : res?.data?.captchaEnabled
					if (this.captchaEnabled) {
						this.codeUrl = 'data:image/gif;base64,' + res?.data?.img
						this.loginForm.uuid = res?.data?.uuid
					}
				})
			},
			// 登录方法
			async handleLogin() {
				if (!this.loginForm.isAgrement) {
					uni.showToast({
						title: '请阅读并同意用户协议和隐私协议',
						icon: 'none',
						duration: 2000,
						position: 'bottom'
					})
					return
				}
				if (this.loginForm.username === "") {
					uni.showToast({
						title: '请输入您的账号',
						icon: 'error'
					})
				} else if (this.loginForm.password === "") {
					uni.showToast({
						title: '请输入您的密码',
						icon: 'error'
					})
				} else if (this.loginForm.code === "" && this.captchaEnabled) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'error'
					})
				} else {
					uni.showLoading({
						title: '登录中，请耐心等待...',
						icon: 'none'
					})
					this.pwdLogin()
				}
			},
			// 密码登录
			pwdLogin() {
				this.userStore.handleLogin(this.loginForm).then(res => {
					// 调用App.vue的初始化方法
					getApp().$vm.init()
					uni.hideLoading()
					// 跳转到聊天页面   
					uni.switchTab({
						url: "/pages/chat/chat"
					})
				}).catch(err => {
					uni.showToast({
						title: err.msg ? err.msg : '登录失败，请稍后再试！',
						icon: 'none',
						duration: 2000,
						position: 'bottom'
					})
					this.getCode()
				})
			},
			// 添加 checkbox 变化处理方法
			checkboxChange(e) {
				this.loginForm.isAgrement = !this.loginForm.isAgrement
			},
			submit() {
				this.$http({
					url: '/login',
					data: this.loginForm,
					method: 'POST'
				}).then(loginInfo => {
					uni.setStorageSync("userName", this.loginForm.userName);
					uni.setStorageSync("password", this.loginForm.password);
					uni.setStorageSync("loginInfo", loginInfo);
					// 调用App.vue的初始化方法
					getApp().$vm.init()
					// 跳转到聊天页面   
					uni.switchTab({
						url: "/pages/chat/chat"
					})
				})
			}
		},

		onLoad() {
			this.getCode();
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.normal-login-container {
		width: 100%;
		padding: 0 68rpx;
		box-sizing: border-box;

		.logo-content {
			padding-top: 230rpx;
			text-align: center;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 36rpx;
			}

			.title {
				font-family: Alibaba PuHuiTi;
				font-size: 60rpx;
				font-weight: bold;
				color: #333333;
				margin-top: 38rpx;
			}
		}

		.login-form-content {
			margin-top: 80rpx;

			.input-item {
				width: 100%;
				height: 88rpx;
				background-color: #F5F6F7;
				border-radius: 60rpx;
				margin-bottom: 30rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.login_icon {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}

				.input {
					flex: 1;
					height: 100rpx;
					font-size: 28rpx;
					padding-left: 20rpx;
					color: #333;
				}
			}

			.captcha-box {

				.input-item {
					width: 400rpx;
					margin-bottom: 0;
				}

				.captcha-img {
					width: 173rpx;
					height: 65rpx;
					border-radius: 0;
					margin-left: 22rpx;
				}
			}

			.login-btn {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				background: #1977FF;
				border-radius: 50rpx;
				font-size: 34rpx;
				color: #fff;
				margin-top: 50rpx;
				border: none;

				&:active {
					opacity: 0.9;
				}
			}

			.reg {
				margin-top: 22rpx;
				font-size: 26rpx;
				display: flex;

				.text-grey {
					color: #1977FF;
					margin-left: 40rpx;
				}

				.text-blue {
					color: #1977FF;
					margin-left: auto;
					margin-right: 40rpx;
				}
			}

			.agreement-box {
				margin-top: 30rpx;
				margin-left: 31rpx;

				.agreement-box-main {
					display: flex;
					align-items: center;

					.agreement-box-icon {
						width: 34rpx;
						height: 34rpx;
						margin-right: 12rpx;
					}
				}
			}
		}
	}
</style>